<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-cn">
<%--静态包含头部信息--%>
<%@include file="/WEB-INF/include-head.jsp" %>
<link href="ztree/zTreeStyle.css" rel="stylesheet">
<script src="ztree/jquery.ztree.all-3.5.min.js" type="text/javascript"></script>
<script type="text/javascript" src="crowd/my-menu.js"></script>
<script type="text/javascript">
    $(function () {

        /**
         * select 是标签选择器
         * eq(0) 表示选择页面上的第一个
         * eq(1) 表示选择页面上的第二个
         * > 表示选择子元素
         * :selected 表示被选中的 option
         * appendTo 可以将jQuery对象追加到指定位置
         */
        $("#toRightBtn").click(function () {
            $("select:eq(0)>option:selected").appendTo("select:eq(1)")
        })

        $("#toLeftBtn").click(function () {
            $("select:eq(1)>option:selected").appendTo("select:eq(0)")
        })

        $("#submitBtn").click(function () {
            // 提交表单前将所有已分配option全部选中
            $("select:eq(1)>option").prop("selected","selected")
        });

    })
</script>

<body>

<%--静态包含导航栏--%>
<%@include file="/WEB-INF/include-nav.jsp" %>

<div class="container-fluid">
    <div class="row">
        <%--        静态包含菜单栏--%>
        <%@include file="/WEB-INF/include-sidebar.jsp" %>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <ol class="breadcrumb">
                <li><a href="#">首页</a></li>
                <li><a href="#">数据列表</a></li>
                <li class="active">分配角色</li>
            </ol>
            <div class="panel panel-default">
                <div class="panel-body">
                    <form role="form" class="form-inline" method="post" action="assign/do/role/assign.html">
                        <input type="hidden" name="adminId" value="${param.adminId}">
                        <input type="hidden" name="pageNum" value="${param.pageNum}">
                        <input type="hidden" name="keyword" value="${param.keyword}">
                        <div class="form-group">
                            <label for="exampleInputPassword1">未分配角色列表</label><br>
                            <select class="form-control" multiple="" size="10" style="width:100px;overflow-y:auto;">
                                <c:forEach items="${requestScope.unAssignedRoleList}" var="role">
                                    <option value="${role.id}">${role.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <div class="form-group">
                            <ul>
                                <li class="btn btn-default glyphicon glyphicon-chevron-right" id="toRightBtn"></li>
                                <br>
                                <li class="btn btn-default glyphicon glyphicon-chevron-left" id="toLeftBtn"
                                    style="margin-top:20px;"></li>
                            </ul>
                        </div>
                        <div class="form-group" style="margin-left:40px;">
                            <label for="exampleInputPassword1">已分配角色列表</label><br>
                            <select name="roleIdList" class="form-control" multiple="" size="10"
                                    style="width:100px;overflow-y:auto;">
                                <c:forEach items="${requestScope.assignedRoleList}" var="role">
                                    <option value="${role.id}">${role.name}</option>
                                </c:forEach>
                            </select>
                        </div>

                        <button id="submitBtn" type="submit" style="width: 50px"
                                class="btn btn-sm btn-success btn-block col-md-offset-3">保存
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
